<template>
  <div>
    <div class="intrumentBox">
      <div class="leftContent">
        <title-text>
          <span slot="title">各城市仪器列表详情</span>
        </title-text>
        <!-- 表格 -->
        <div class="tableBox">
          <el-table
            @row-click="tableRowClick"
            :row-style="rowStyle"
            :header-cell-style="headStyle"
            :cell-style="cellStyle"
            :data="tableData"
            :size="small"
            :fit="fit"
            :highlight-current-row=true
          >
            <el-table-column
              prop="code"
              label="序列号"
              min-width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              align="center"
            >
            </el-table-column>
            <!-- <el-table-column
              prop="week"
              label="所在医院"
            >
            </el-table-column> -->
            <el-table-column
              prop="aName"
              label="大区"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="city"
              label="城市"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="isUsing"
              label="仪器状态"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="installDate"
              label="装机时间"
              align="center"
            >
            </el-table-column>
          </el-table>

        </div>
        <!-- 分页器 -->
        <div class="pagesBox">
          <el-pagination
            background
            @current-change="cityInstrumentList"
            layout="prev, pager, next,jumper"
            :total="insTotal"
            :page-size="insPageSize"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 仪器图片模块 -->
      <div class="rightBox">
        <div class="leftRandomBox baseRandomBox">
          <ul>
            <!-- 该仪器随机信息 -->
            <li
              v-for="(item,index) in liData"
              :style="item.style"
              :key="index"
            >{{item.title}}{{item.value}}</li>
          </ul>
        </div>
        <div class="rightRandomBox baseRandomBox">
          <ul>
            <li
              v-for="(item,index) in timeLiData"
              :style="item.style"
              :key="index"
            >{{item.title}}{{item.value}}</li>
          </ul>
        </div>
        <img
          id="tg3999"
          src="@/assets/imgs/S6500.png"
          alt=""
        >
      </div>

    </div>
  </div>
</template>

<script>
import { cityInstrumentList } from "@/request/api.js";
import { instrumentBaseInfo } from "@/request/api.js";

import titleText from "@/components/title.vue";
import "@/assets/base/echartsBaseStyle.css";
export default {
  components: {
    titleText,
    cityInstrumentList,
  },
  created() {
    this.cityInstrumentList(1);
    this.instrumentBaseInfo();
    this.columnRandom();
  },
  data() {
    return {
      small: "small",
      fit: true,
      headStyle: {
        height: "5rem",
        backgroundColor: "#131428",
        color: "#FFFFFF",
        fontSize: "1.4rem",
      },
      cellStyle: {
        height: "5rem",
        fontSize: "1.4rem",
      },
      tableData: [],
      insTotal: null,
      insPageSize: 15,
      liData: [
        { title: "周维护次数: ", value: 0, style: "", id: "w" },
        { title: "月维护次数: ", value: 0, style: "", id: "m" },
        { title: "季维护次数: ", value: 0, style: "", id: "s" },
      ],
      timeLiData: [
        { title: "装机时间: ", value: "2021-10-24", style: "", id: "w" },
        { title: "故障总数: ", value: 39, style: "", id: "m" },
      ],
    };
  },
  methods: {
    //某一行被点击时触发函数
     tableRowClick(e) {
       console.log("点击了",e);
     },
    //各城市仪器列表请求成功接口
    cityInstrumentList(pages) {
      cityInstrumentList({
        page: pages,
        pageSize: "15",
      })
        .then((res) => {
          console.log("各城市仪器列表请求成功", res);
          if (res.data.success) {
            this.tableData = res.data.rows;
            this.insTotal = res.data.total;
          }
        })
        .catch((err) => {
          console.log("各城市仪器列表请求失败", err);
        });
    },
    //仪器基本信息
    instrumentBaseInfo() {
      instrumentBaseInfo({
        eCode: "TEST_0003",
      })
        .then((res) => {
          console.log("仪器基本信息接口成功", res);
          this.liData[0].value = res.data.WCount;
          this.liData[1].value = res.data.MCount;
          this.liData[2].value = res.data.QCount;
          this.timeLiData[0].value =res.data.InstallDate;
          this.timeLiData[1].value =res.data.ECount;

        })
        .catch((err) => {
          console.log("仪器基本信息接口失败", err);
        });
    },
    rowStyle(row) {
      if (row.rowIndex % 2 === 0) {
        return { backgroundColor: "#222644" };
      } else if (row.rowindex % 2 === 1) {
        return { backgroundColor: "#262b4b" };
      }
    },
    columnRandom() {
      for (var i = 0; i < this.liData.length; i++) {
        var topValue =
          Math.floor(Math.random() * 80) - Math.floor(Math.random() * 4);
        var leftValue = Math.floor(Math.random() * 12);
        this.liData[i].style =
          "left:" + leftValue + "rem;top:" + topValue + "rem;";
      }
      for (var i = 0; i < this.timeLiData.length; i++) {
        var topValue =
          Math.floor(Math.random() * 80) - Math.floor(Math.random() * 4);
        var leftValue = Math.floor(Math.random() * 12);
        this.timeLiData[i].style =
          "left:" + leftValue + "rem;top:" + topValue + "rem;";
      }
      console.log("随机数为:", Math.floor(Math.random() * 12));
    },
  },
};
</script>

<style lang="less" scoped>
.intrumentBox {
  width: 100%;
  height: 101rem; //改代码需要自适应
  flex-direction: row;
  display: flex;
  .rightBox {
    flex: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .baseRandomBox {
      min-width: 30rem;
      height: 80%;
      // background-color: #164230;
      position: absolute;
    }

    .leftRandomBox {
      left: 0rem;
      ul {
        position: relative;
        li {
          width: 17rem;
          height: 3rem;
          background: rgb(62, 73, 11);
          border-radius: 6rem;
          position: absolute;
          left: 14rem;
          text-align: center;
          line-height: 3rem;
        }
        li:nth-child(3) {
          top: 0rem;
        }
        li:nth-child(1) {
          top: 6rem;
        }
        li:nth-child(2) {
          top: 80rem;
        }
      }
    }
    .rightRandomBox {
      right: 0;
      ul {
        position: relative;
        li {
          min-width: 20rem;
          height: 3rem;
          background: rgb(56, 6, 52);
          border-radius: 6rem;
          position: absolute;
          left: 14;
          text-align: center;
          line-height: 3rem;
        }
        li:nth-child(1) {
          top: 6rem;
        }
        li:nth-child(2) {
          top: 80rem;
          background: rgb(128, 48, 2);
        }
      }
    }

    #tg3999 {
      width: 78%;
      height: auto;
    }
  }
  .leftContent {
    flex: 8.6;
    height: 100%;
    background-color: #191931;
    border-radius: 1.4rem;
    border: 0.1rem solid #232341;
    margin-left: 1.7rem;
    padding: 0 2rem;
    .tableBox {
      width: 100%;
      height: 86%;
      // background-color: rgb(99, 25, 80);
    }
    .pagesBox {
      width: 100%;
      height: 7rem;
      // background-color: #1b5f2a;
      margin-top: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
